<template lang="pug">
  .sold
    .Popup-one(v-show='pop_one')
      .Popup-one-top {{sells}}
      .Popup-one-bottom
        img(src='static/image/X-btn.png' @click='closepop_one(false)')
        img(src='static/image/Accept-btn.png' @click='closepop_one(true)')
    .content
      .title 售出
      .goods1
        ul
          li
            span(data-title="青丹") 青丹

            .g1-amount
              input(type='text' v-model='list.qingDan')
              .arrow
                img(src="../../../static/image/z_arrowup.png" class="up" @click="list.qingDan<listOld.qingDan?list.qingDan++:list.qingDan")
                img(src="../../../static/image/z_arrowd.png" class="down" @click="list.qingDan<=0?0:list.qingDan--")
          li
            span(data-title="银丹") 银丹
            .g1-amount
              input(type='text' v-model='list.yinDan')
              .arrow
                img(src="../../../static/image/z_arrowup.png" class="up" @click="list.yinDan<listOld.qingDan?list.yinDan++:list.yinDan")
                img(src="../../../static/image/z_arrowd.png" class="down" @click="list.yinDan<=0?0:list.yinDan--")
      .goods1
        ul
          li
            span(data-title="仙丹") 仙丹
            .g1-amount
              input(type='text' v-model='list.xianDan')
              .arrow
                img(src="../../../static/image/z_arrowup.png" class="up" @click="list.xianDan<listOld.qingDan?list.xianDan++:list.xianDan")
                img(src="../../../static/image/z_arrowd.png" class="down" @click="list.xianDan<=0?0:list.xianDan--")
          li
            span(data-title="金丹") 金丹
            .g1-amount
              input(type='text' v-model='list.jinDan')
              .arrow
                img(src="../../../static/image/z_arrowup.png" class="up" @click="list.jinDan<listOld.qingDan?list.jinDan++:list.jinDan")
                img(src="../../../static/image/z_arrowd.png" class="down" @click="list.jinDan<=0?0:list.jinDan--")
      .worth
        .goods1
          //- span.g1-title(data-title="提币地址:") 提币地址:
          //- span.g2
          //-   input( v-model='value' )
        .w-value
          span.w-title(data-title="总价值：") 总价值：
          span.value(data-title="") {{listmost || 0}}{{gametype}}
        .w-btn(data-title="立即付款" @click='sell') 立即出售
      p
        span.choice()
        span.rules(data-title="我已阅读活规则，充值金额不可体现、退款") 我已阅读活规则，充值金额不可体现、退款

  //
</template>
<script>
import $ from "jquery";

export default {
  name: "chief",
  data() {
    return {
      good1a: 0,
      good1b: 0,
      good1c: 0,
      good2a: 0,
      good2b: 0,
      good2c: 0,
      choose: false,
      list: u.getStore("userInfo") || {},
      listOld: u.getStore("userInfo") || {},
      listTwo: u.getStore("chemyList") || {},
      listmore: 0,
      value: "",
      sellflag: false,
      gametype: u.getStore("winning").type,
      pop_one: false,
      sells: "是否确认出售",

    };
  },
  computed: {},
  created() {
    let exchange = JSON.parse(localStorage.getItem("exchange"));
    this.exchange = exchange;
    console.log(u.getStore("userInfo"));
  },
  mounted() {
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
  },
  computed: {
    listmost() {
      return (this.listmore =
        this.list.qingDan * this.exchange.qingdan +
        this.list.yinDan * this.exchange.yindan +
        this.list.xianDan * this.exchange.xiandan +
        this.list.jinDan * this.exchange.jindan);
    }
  },
  methods: {
    closepop_one(d) {
      this.pop_one = false;
      if (!d) {
        return;
      }

      var address = this.value;
      if (this.sellflag) return;

      setTimeout(() => {
        this.sellflag = false;
      }, 2000);
      this.sellflag = true;

      u.exchangeRecharge({
          phone: u.getStore("user").userid,
          num: this.listmore,
          tokenType: u.getStore("winning").type,
        },data=>{
          if(data.code==200){
            u.sellRorJ(
              {
                type: 2,
                jindan: this.list.jinDan || 0,
                yindan: this.list.yinDan || 0,
                xiandan: this.list.xianDan || 0,
                qingdan: this.list.qingDan || 0,
                phone: u.getStore("user").userid
              },
              data => {
                var id = data[0].id;
                if(data[0].code==200){
                  u.updateSell({
                    id: id,
                    isPass: 1,
                  },data=>{
                    if(data[0].code==200){
                      this.$parent.loading({
                        message: "售出成功，已提现到交易所",
                        type: true
                      });
                      setTimeout(() => {
                        this.$router.push({ path: "/aceuserdata" });
                        window.location.reload();
                      }, 2000);
                    }else{
                      this.$parent.loading({
                        message: "售出失败",
                        type: false
                      });
                    }
                  })
                }else{
                  this.$parent.loading({
                    message: "售出失败",
                    type: false
                  });
                }
                /*u.tibi(
                  {
                    bag_id: id,
                    remittanceMode: "游戏手动充值",
                    phone: u.getStore("user").userid,
                    tokenType: this.gametype,
                    num: this.listmore,
                    remarks: "游戏手动充值"
                  },
                  data => {
                    // alert("售出成功");
                    this.$parent.loading({
                      message: "奖品已经售出，等待审核中",
                      type: true
                    });
                    setTimeout(() => {
                      this.$router.push({ path: "/aceuserdata" });
                      window.location.reload();
                    }, 1200);
                  }
                );*/
              }
            );
          }else{
            this.$parent.loading({
              message: "售出失败",
              type: false
            });
          }
      })
    },
    toogle(k, flag) {
      flag
        ? this.list[k] < this.listTwo[k] && this.list[k]++
        : this.list[k] > 0 && this.list[k]--;
    },
    sell() {
      var that = this;
      if (
        Number(this.list.qingDan) > this.listOld.qingDan ||
        Number(this.list.yinDan) > this.listOld.yinDan ||
        Number(this.list.xianDan) > this.listOld.xianDan ||
        Number(this.list.jinDan) > this.listOld.jinDan ||
        Number(this.list.jinDan) < 0 ||
        Number(this.list.yinDan) < 0 ||
        Number(this.list.xianDan) < 0 ||
        Number(this.list.qingDan) < 0 ||
        Number(this.list.xianDan) +
          Number(this.list.qingDan) +
          Number(this.list.yinDan) +
          Number(this.list.jinDan) ==
          0
      ) {
        return this.$parent.loading({
          message: "输入错误",
          type: false
        });
      }
      this.pop_one = true;
    },
    addAmount(str) {
      if (str === 0) {
        this.good1a = this.good1a + 1;
      } else if (str === 1) {
        this.good1b = this.good1b + 1;
      } else if (str === 2) {
        this.good1c = this.good1c + 1;
      }
    },
    cutAmount(str) {
      if (str === 0) {
        if (this.good1a >= 1) {
          this.good1a = this.good1a - 1;
        }
      } else if (str === 1) {
        if (this.good1b >= 1) {
          this.good1b = this.good1b - 1;
        }
      } else if (str === 2) {
        if (this.good1c >= 1) {
          this.good1c = this.good1c - 1;
        }
      }
    },
    addAmount2(str) {
      if (str === 0) {
        this.good2a = this.good2a + 1;
      } else if (str === 1) {
        this.good2b = this.good2b + 1;
      } else if (str === 2) {
        this.good2c = this.good2c + 1;
      }
    },
    cutAmount2(str) {
      if (str === 0) {
        if (this.good2a >= 1) {
          this.good2a = this.good2a - 1;
        }
      } else if (str === 1) {
        if (this.good2b >= 1) {
          this.good2b = this.good2b - 1;
        }
      } else if (str === 2) {
        if (this.good2c >= 1) {
          this.good2c = this.good2c - 1;
        }
      }
    },
    rule() {
      if (this.choose === false) {
        document.getElementsByClassName("choice")[0].style.background =
          "url('../../../static/image/z_ok.png') no-repeat";
        document.getElementsByClassName("choice")[0].style.backgroundSize =
          "100% 100%";
        this.choose = !this.choose;
      } else {
        document.getElementsByClassName("choice")[0].style.background =
          "url('../../../static/image/radio.png') no-repeat";
        document.getElementsByClassName("choice")[0].style.backgroundSize =
          "100% 100%";
        this.choose = !this.choose;
      }
    }
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
.Popup-one {
  background: url('../../../static/image/Panel.png') no-repeat;
  height: 210px;
  width: 460px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
  z-index: 1000;

  .Popup-one-top {
    height: 150px;
    font-size: 28px;
    color: #fff;
    line-height: 150px;
    text-shadow: 0 2px #505050, 2px 0 #505050, -2px 0 #505050, 0 -1px #505050;
  }

  .Popup-one-bottom {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 40px;

    img:nth-of-type(1) {
      margin-right: 40px;
    }

    img:nth-of-type(2) {
      margin-left: 40px;
    }
  }
}

.sold {
  padding: 30px;
  width: 100%;
  height: 100%;
  background-image: url('../../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .content {
    position: relative;
    padding: 50px 30px;
    width: 100%;
    height: 100%;
    background-image: url('../../../static/image/soldbg.png');
    background-size: 100% 100%;

    .title {
      margin-bottom: 30px;
      position: relative;
      font-size: 27px;
      color: white;
      z-index: 0;

      &:before {
        content: '售出';
        position: absolute;
        -webkit-text-stroke: 4px #a56a2c;
        z-index: -1;
      }
    }

    .goods1 {
      margin: 0 auto;
      width: 480px;
      margin-bottom: 58px;
      display: flex !important;
      flex-direction: row !important;
      justify-content: flex-start !important;

      .g1-title {
        display: inline-block;
        width: 129px;
        position: relative;
        font-size: 24px;
        color: white;
        z-index: 0;
        line-height: 48px;
        text-align: left;

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 3px #3a230a;
          z-index: -1;
        }
      }

      ul {
        display: inline-block;
        vertical-align: top;

        li {
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          font-size: 28px;
          color: white;

          > span {
            position: relative;
            z-index: 0;

            &:before {
              content: attr(data-title);
              position: absolute;
              -webkit-text-stroke: 3px #a56a2c;
              z-index: -1;
            }
          }

          .g1-amount {
            position: relative;
            margin-left: 70px;
            padding-left: 30px;
            display: inline-block;
            width: 165px;
            height: 50px;
            line-height: 47px;
            background: url('../../../static/image/z_8.png') no-repeat;
            background-size: 100% 100%;

            input {
              background: none;
              width: 100px;
            }

            > span {
              position: relative;
              z-index: 0;

              &:before {
                content: attr(data-title);
                position: absolute;
                -webkit-text-stroke: 4px #505050;
                z-index: -1;
              }
            }

            .arrow {
              position: absolute;
              right: 15px;
              top: 4px;
              display: inline-block;
              line-height: 50px;
              float: right;
              z-index: 99;

              > img {
                display: block;
                width: 15px;
                height: 10px;
                margin: 6px 0;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }

  .worth {
    margin: 0 auto;
    margin-top: 126px;
    width: 480px;
    text-align: right;

    .g2 {
      display: inline-block;
      width: 68%;
      height: 55px;
      background: url('../../../static/image/http.png') no-repeat center;
      background-size: 100% 100%;
      text-align: center;

      input {
        width: 95%;
        background-color: transparent;
        border: 0;
        height: 100%;
        font-size: 18px;
        font-weight: 700;
        color: white;

        &:focus {
          outline: none;
        }

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 3px #3a230a;
          z-index: -1;
        }
      }
    }

    .w-value {
      display: flex;
      align-items: center;
      text-align: left;

      .w-title {
        position: relative;
        font-size: 24px;
        color: white;
        z-index: 0;

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 3px #3a230a;
          z-index: -1;
        }
      }

      .value {
        margin-left: 36px;
        position: relative;
        font-size: 36px;
        color: white;
        z-index: 0;

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 3px #ca4737;
          z-index: -1;
        }
      }
    }

    .w-btn {
      display: inline-block;
      margin: 47px 0;
      position: relative;
      width: 210px;
      height: 60px;
      text-align: center;
      font-size: 24px;
      color: white;
      line-height: 57px;
      z-index: 0;
      background: url('../../../static/image/z_1.png') no-repeat;
      background-size: 100% 100%;

      &:before {
        content: attr(data-title);
        position: absolute;
        -webkit-text-stroke: 3px #9c130b;
        z-index: -1;
      }
    }
  }

  p {
    position: absolute;
    bottom: 40px;
    margin-left: 77px;
    display: flex;
    align-items: center;

    .choice {
      margin: 0 10px;
      display: inline-block;
      width: 35px;
      height: 35px;
      background: url('../../../static/image/z_ok.png') no-repeat;
      background-size: 100% 100%;
    }

    .rules {
      position: relative;
      font-size: 22px;
      color: white;
      z-index: 0;

      &:before {
        content: attr(data-title);
        position: absolute;
        -webkit-text-stroke: 3px #a56a2c;
        z-index: -1;
      }
    }
  }
}
</style>
